<!--手机端首页-->
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="format-detection" content="telphone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/global.css"
	type="text/css">
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/index.css"
	type="text/css">
<script src="__TEMPLATE__/sysme/js/jquery-1.9.1.min.js"></script>

<script src="__TEMPLATE__/index/js/scroll.js" type="text/javascript"></script>
<script type="text/javascript" src="__TEMPLATE__/mobile/index/js/clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<script src="__SYSMET__/lib/layer/2.4/layer.js" type="text/javascript"></script>
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式-->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<script type="text/javascript">
	$(function() {
		$('.news-info').myScroll({
			speed : 40, //数值越大，速度越慢
			rowHeight : 26
		//li的高度
		});
	});
</script>
<script type="text/javascript">
	//轮播切换
	var LunBoCount = 0;

	function qiehuan_img() {

		$('#img_qh_1').hide();

		$('#img_qh_2').hide();

		$('#img_qh_3').hide();

		$('#img_qh_4').hide();

		if (LunBoCount > 3) {
			LunBoCount = 0;
		}

		LunBoCount = LunBoCount + 1;

		var anniu_id = "img_qh_" + LunBoCount;

		$('#' + anniu_id).show();

		setTimeout("qiehuan_img()", 3000);

	}

	setTimeout("qiehuan_img()", 1000);
</script>
<style>
	#layui-layer1{
	z-index: 19891015;
    width: 700px;
    height: 450px;
    top: 59.5px;
    left: 601.5px;
    border-radius: 8px !important;
    overflow: auto;
	}
	
/*#wrapper_1 {
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
} */
/*解决苹果滚动条卡顿的问题*/
/*#wrapper_1 {
	overflow-y: visible !important;
}*/

.lott-menu {
	position: fixed;
	top: 44px;
	left: 0;
	margin-top: 0 !important;
}

.gray {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}

#tishi {
	width: 200px;
	height: 150px;
	display: none;
	background: #fff;
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: -100px;
	border-radius: 5px;
	text-align: center;
	font-size: 14px;
	z-index: 1111;
}

#tishi_ts {
	width: 60px;
	height: 30px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -25px;
	background: #e7aea6;
	line-height: 30px;
	border-radius: 4px;
	color: #fff;
	z-index: 22222;
}

#tishi p {
	width: 160px;
	height: 70px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	color: #f00;
	font-weight: bold;
	z-index: 111111;
	padding: 0 10px;
}

.zdc {
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.6;
	z-index: 111111;
	position: fixed;
	top: 0;
	display: none;
}

.box_1 span {
	font-size: 15px;
}
.hongbao{width:100px;height:100px;position:fixed;right:2px;top:265px;z-index: 55;}
.hongbao div{width:100px;height:100px;background:url(__TEMPLATE__/mobile/index/img/icon_hb.png);background-size:cover;}
#hb_zzc{width:100%;height:100%;background:#000;opacity: .3;position:fixed;top:0;right:0;z-index:101;display:none;}
#hb_show{width:300px;height:170px;position:fixed;top:50%;left:50%;z-index: 102;margin-left:-150px;margin-top:-75px;display:none;}
#hb_show div{width:100%;height:50px;background-size:cover;}
</style>

<title>{$logo.title}-首页</title>
</head>

<body>
	<div id="hb_zzc"></div>
	<div id="hb_show">
		<i class="Hui-iconfont" id="close_hb_tk" style="position:absolute;display:inline-block;border-radius:50%;text-align:center;width:25px;height:25px;border:1px solid #ccc;right:-12px;top:-12px;background:#fff;line-height:27px;">&#xe6a6;</i>
		<img src="__TEMPLATE__/mobile/index/img/hb_tk.png" style="display:block;margin-top:-53px;" />
		<p style="background:#fff;text-align: center;width:100%;height:40px;line-height:40px;color:#f00;font-size: 14px;" id="hb_money"></p>
	</div>
	{if($bonus.flip>0)}
	<div class="hongbao">
		<div id="hongbao"></div>
		<i class="Hui-iconfont" id="close_hb" style="position:absolute;display:inline-block;border-radius:50%;text-align:center;width:20px;height:20px;border:1px solid #ccc;right:10px;top:2px;background:#fff;line-height:22px;">&#xe6a6;</i>
	</div>
	{/if}
	<div></div>
	<div id="ji"
		style="width: 250px; height: 40px; position: fixed; top: 0; right: 0; left: 0; bottom: 0; margin: auto; opacity: .7; background: #000; border-radius: 4px; display: none; z-index: 1111;">

	</div>
	<div id="ti_nr"
		style="width: 250px; height: 40px; line-height: 40px; text-align: center; position: fixed; display: none; top: 0; font-size: 12px; right: 0; left: 0; bottom: 0; margin: auto; color: #fff; z-index: 11112;"></div>
	<div id="tishi">
		<p id="tishi_tsy" style="font-size: 16px;"></p>
		<div id="tishi_ts">确定</div>
	</div>
	<div class="header">
		<div class="headerTop header-logo">

			<div id="" style="display: inline-block;">
				<img src="__TEMPLATE__/mobile/index/img/title_1.png" height="25" />
			</div>

			<div style="position: relative; left: -1px; height: 20px; top: -6px; color: #FFFFFF; display: inline-block; font-size: 90%; letter-spacing: 2px;">
				{$logo.title}!</div>
			<div
				style="position: relative; float: right; height: 25px; top: -6px; font-size: 80%; color: #FFFFFF;
				background-image:__TEMPLATE__/mobile/index/img/title_1.png;
				">
				{if condition="$user_all['username']"} <!--{$f.username}-->
				<font style="color: #FFD700;margin-left:5px;">￥{$f.je}</font>
				{else /}
				<a href="{:url('user/login')}" style="color: #fff;"> 登录 </a>
				|
				<a href="{:url('user/register')}" style="color: #fff;"> 注册 </a>
				|{/if}
				
				<a href="http://9771688.com/" style="color: #f00;background:#fff;margin-left:5px;border-radius: 10px;padding:2px 10px;"> APP 下载</a>
				
			</div>
		</div>
	</div>
	<div id="wrapper_1" class="scorllmain-content nobottom_bar"
		style="padding-top: 44px; padding-bottom: 18px; background-color: #fff;">
		<div class="sub_ScorllCont">
			<div class="header-banner" style="height: 130px; overflow: hidden;">
				{foreach $pc_guangg as $k=>$dn}
				<a href='{$dn.gg_url}' target='_blank'>
					<div id='img_qh_{$k+1}' style='display: none;'>
						<img class='banner' src='__ATTACHMENT__/{$dn.gg_img}' alt=''
							style='width: 100%; height: 130px;'>
					</div>
				</a>
				{/foreach}
			</div>
			<div class="bulletin"
				style="margin-left: -6px; background-color: #fff;">
				<p class="bull-ila" style="font-size: 12px;">
					<img src="__TEMPLATE__/mobile/index/img/ilabandex_.png"
						style="width: 18px; height: 18px;" />
				</p>
				<p style="margin-top: -3px; font-size: 0.875rem;">公告：</p>

				<marquee behavior="scroll">
					<span id="horse" style="font-size: 0.875rem; margin-top: 10px;">
						{foreach $lblist as $lb}
						<a href="{:url('Show/aboutDetail')}?nid={$lb.id}">
							<font style='color: #d91d36;'>{$lb.title}</font>
						</a>
						{/foreach}
					</span>
				</marquee>
				<!--<div class="bull-text" id="horse">欢迎您的加入。</div>-->
				<i class="bull-arrow"></i>
			</div>
			<div class="index-menu">
				<ul>
					<li style="height: 75px; padding-top: 13px;">
						<a href="{:url('member/index')}">
							<img src="__TEMPLATE__/mobile/index/img/index_zoushi.png">
							<p style="font-size: 0.8rem; margin-top: 2px;">存/取款</p>
						</a>
					</li>
					<li style="height: 75px; padding-top: 13px;">
						<a href="javascript:;" id="sw">
							<img src="__TEMPLATE__/mobile/index/img/index_kefu.png">
							<p style="font-size: 0.8rem; margin-top: 2px;">免费试玩</p>
						</a>
					</li>
					<li style="height: 75px; padding-top: 13px;">
						<a href="{:url('show/favourable')}">
							<img src="__TEMPLATE__/mobile/index/img/index_youhui.png">
							<p style="font-size: 0.8rem; margin-top: 2px;">优惠活动</p>
						</a>
					</li>
					<li style="height: 75px; padding-top: 13px;">
						<a href="{$zxkf}">
							<img src="__TEMPLATE__/mobile/index/img/index_goucai.png">
							<p style="font-size: 0.8rem; margin-top: 2px;">在线客服</p>
						</a>
					</li>
					<!--优惠活动-->

				</ul>
			</div>

			<div style="clear: both"></div>
			<div class="null-top "></div>
			<div class="hot-new-tit">
				<a class="hot-tit-text" href="javascript:;"
					style="margin-left: 3px; letter-spacing: 2px; display: block; width: 92px; height: 30px; line-height: 30px; background-color: #e53120; font-size: 18px; text-align: center; color: white;">热门彩票</a>
			</div>
			<a class="hot-tit-text" href="javascript:;"> </a>
			<div class="host-list-erect" style="background-color: #fff;">
				<a class="hot-tit-text" href="javascript:;"> </a>
				<ul>

					{foreach $rem_top as $tu}
					<li class='game_category_2'>
						<a class='hot-tit-text' href='javascript:;'> </a>
						<a href="{:url('Game/index')}?game_id={$tu.id}">

							<div class='hot-icon new-list-img'>

								<img class='' src="__TEMPLATE__/sysme/images/{$tu['id']}.png">

							</div>

							<div class='hot-list-text border-right' data-gid='5'
								style="margin-top: 13%;">

								<p class='hot-text list-text' style="font-size: 14px;">{$tu['cp_name_new']}</p>
								<p class='hot-text list-text' style="font-size: 12px; margin-top: 6%; color: #666;">{$tu['remark']}</p>

							</div>

						</a>

					</li>

					{/foreach}
				</ul>
			</div>
			<div style="clear: both"></div>
			<div class="null-bg"></div>
			<div class="hot-new-tit border-none" >
				<a class="hot-tit-text" href="javascript:;"
					style="margin-left: 3px; letter-spacing: 2px; display: block; width: 92px; height: 30px; line-height: 30px; background-color: #e53120; font-size: 18px; text-align: center; color: white;">最新中奖榜</a>
                <div  style="position: relative;  overflow: hidden; height: 200px;">
						<ul style="position: absolute; width: 100%; padding-left: 1%; padding-right: 2%; box-sizing: border-box; top: 0px;" id="zj_list">
							{foreach $phblist as $pv}
							<li style="overflow: hidden;overflow: hidden;font-size:14px;">
								<div style="float:left;width:28%;text-align: center;">
									<img style="width:25px;margin-top:9px;margin-right:4px;float:left;" src="__TEMPLATE__/mobile/index/img/jiangbei.png"/>
									<span style="float:left;">{$pv.usern}****</span>
								</div>
								<div style="float:left;color:red;width:44%;text-align: center;">喜中{$pv.zhongjje}元</div>
								<div style="float:left;width:28%;text-align: center;">{$pv.cp_name}</div>
								
							</li>
							{/foreach}
						</ul>
					</div>
				<!--<div id="win_list" >
					<div class="news-info"
						style="position: relative; max-height: 120px; overflow: hidden; height: 120px;">
						<ul
							style="position: absolute; width: 100%; padding-left: 1%; padding-right: 2%; box-sizing: border-box; top: 0px;">
							{foreach $phblist as $pv}
							<li>
								<div class='news-left'>
									<span class='pol-icon'></span>
									{$pv.usern}****
								</div>
								<div class='news-center'>{$pv.cp_name}</div>
								<div class='news-right fr c-red'>喜中{$pv.zhongjje}元</div>
							</li>
							{/foreach}
						</ul>
					</div>
				</div>-->
			</div>
		</div>
		<div class="menu"
			style="border-top: 2px solid #d8d8d8; box-shadow: 0 0 10px #d8d8d8;">
			<ul>
				<!--首页-->
				<li>
					<a class="menu-home" href="{:url('index/mhome')}">
						<img style="" src="__TEMPLATE__/mobile/index/img/nav_01.png">
					</a>
				</li>
				<!--购彩-->
				<li>
					<a class="menu-color" href="{:url('bet/index')}">
						<img style="" src="__TEMPLATE__/mobile/index/img/nav_2.png">
					</a>
				</li>
				<!--开奖-->
				<li>
					<a class="menu-lot" href="{:url('lottery/index')}">
						<img style="" src="__TEMPLATE__/mobile/index/img/nav_3.png">
					</a>
				</li>
				<!--注单-->
				<li>
					<a class="menu-news" href="{:url('lottery/zhudan')}">
						<img style="" src="__TEMPLATE__/mobile/index/img/nav_4.png">
					</a>
				</li>
				<!--我的-->
				<li>
					<a class="menu-my" href="{:url('member/index')}">
						<img style="" src="__TEMPLATE__/mobile/index/img/nav_5.png">
					</a>
				</li>
			</ul>
		</div>
</div>
<script type="text/javascript">
	zj_list()

	function zj_list(){
		var timer=setInterval(function(){
			var aa=0
			var ss=Math.abs( parseInt($('#zj_list').css('top')))
			var ss=Math.abs( parseInt($('#zj_list').css('top')))
	    	aa++
	    	
	//  	var top_val=$('#zj_list').children('li').height()*aa
	    	$('#zj_list').css('top','-'+(ss+aa)+'px')
	    	if((ss+aa)%$('#zj_list').children('li').height()==0){
	    		  clearInterval(timer)
		    	setTimeout(function(){
	    			zj_list()
	    		},800)
	    	}
	    	if(ss==(($('#zj_list li').length)-5)*$('#zj_list').children('li').height()){
	    		aa=0
	    		$('#zj_list').css('top','-'+aa+'px')
	    	}
	    },20)
	}
    
    
	{if($sign)>0}
		$(function(){
			layer.open({
				  title:false,
				  type: 2,
				  closeBtn: 0,
				  area: ['300px', '450px'],
				  content: '/mobile/index/sign'
			});

		})
	{/if}
			var shiwan = true;
			$('#sw').click(function() {
				if (shiwan == false)
					return;
				shiwan = false;
				$.ajax({
					type : "GET",
					url : "{:url('pocessing/shiwan')}",
					success : function(data) {
						
						if (data == 'sw') {
							$('#ji').css('display', 'block')
							$('#ti_nr').css('display', 'block')
							$('#ti_nr').html('申请成功')
							setTimeout(function() {
								$('#ji').css('display', 'none')
								$('#ti_nr').css('display', 'none')
								window.location.href = "/mobile/index/mhome";
								shiwan = true;

							}, 2000)

						} else if(data=='ycz'){
							$('#ji').css('display', 'block')
							$('#ti_nr').css('display', 'block')
							$('#ti_nr').html('现在已登录试玩账户，无法继续点击')
							setTimeout(function() {
								$('#ji').css('display', 'none')
								$('#ti_nr').css('display', 'none')
								shiwan = true;

							}, 2000)
						}else {
							$('#ji').css('display', 'block')
							$('#ti_nr').css('display', 'block')
							$('#ti_nr').html('系统未开启试玩功能')
							setTimeout(function() {
								$('#ji').css('display', 'none')
								$('#ti_nr').css('display', 'none')
								shiwan = true;

							}, 2000)

						}
					}
				})
			})
		</script>

		<script>
			var clipboard = new ClipboardJS('.btn');

			clipboard.on('success', function(e) {
				//console.log(e);
			});

			clipboard.on('error', function(e) {
				//console.log(e);
			});
			
			$('#close_hb').click(function(){
			   $('.hongbao').hide()
			})

			
			$('#close_hb_tk').click(function(){
				 $('#hb_zzc').hide()
			   $('#hb_show').hide()
			})
			$('#hongbao').click(function(){
				$.ajax({
					type:"get",
					url:'/index/Bonus/raffle',
					success:function(v){
						if(v.status == 1){
							$('#hb_money').html(v.msg)
							$('#hb_zzc').show()
			                $('#hb_show').show()
						}else{
							alert(v.msg)
						}
					}
				});
				 
			})
	$(function(){
         var cont=$(".hongbao");    
         var contW=$(".hongbao").width();
         var contH=$(".hongbao").height();            
         var startX,startY,sX,sY,moveX,moveY;        
         var winW=$(window).width();    
         var winH=$(window).height();
         
         
         
        cont.on({
            touchstart:function(e){                
                 startX = e.originalEvent.targetTouches[0].pageX;   
                 startY = e.originalEvent.targetTouches[0].pageY; 
                 sX=$(this).offset().left;
               sY=$(this).offset().top;
            
                leftX=startX-sX;
               rightX=winW-contW+leftX;
                 topY=startY-sY;
               bottomY=winH-contH+topY;
                },
            touchmove:function(e){                
                e.preventDefault();
                moveX=e.originalEvent.targetTouches[0].pageX;
               moveY=e.originalEvent.targetTouches[0].pageY;
               
                if(moveX<leftX){moveX=leftX;}                                
                 if(moveX>rightX){moveX=rightX;}
                if(moveY<topY){moveY=topY;}
                if(moveY>bottomY){moveY=bottomY;}
                $(this).css({
                     "left":moveX+sX-startX,
                     "top":moveY+sY-startY,                    
                     })
                }
            
         })
        
       })
		</script>